﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>小赵娱乐</title>
    <meta
      name="viewport"
      content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
    />

    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="ui">
      <div class="ui__background"></div>

      <div class="ui__game"></div>

      <div class="ui__texts">
        <h1 class="text text--title">
          <span>神奇小魔方</span>
          <span></span>
        </h1>
        <div class="text text--note">双击即可开始</div>
        <div class="text text--timer">0:00</div>
        <div class="text text--complete">
          <span>Complete!</span>
        </div>
        <div class="text text--best-time">
          <icon trophy></icon>
          <span>Best Time!</span>
        </div>
      </div>

      <div class="ui__prefs">
        <range
          name="flip"
          title="Flip Type"
          list="Swift&nbsp;,Smooth,Bounce"
        ></range>
        <range name="scramble" title="Scramble Length" list="20,25,30"></range>
        <range
          name="fov"
          title="Camera Angle"
          list="Ortographic,Perspective"
        ></range>
        <range
          name="theme"
          title="Color Scheme"
          list="Cube,Erno,Dust,Camo,Rain"
        ></range>
      </div>

      <div class="ui__stats">
        <div class="stats" name="total-solves">
          <i>Total solves:</i><b>-</b>
        </div>
        <div class="stats" name="best-time"><i>最佳时间:</i><b>-</b></div>
        <div class="stats" name="worst-time"><i>最长的时间:</i><b>-</b></div>
        <div class="stats" name="average-5"><i>平均 5:</i><b>-</b></div>
        <div class="stats" name="average-12"><i>平均 12:</i><b>-</b></div>
        <div class="stats" name="average-25"><i>平均 25:</i><b>-</b></div>
      </div>

      <div class="ui__buttons">
        <button class="btn btn--bl btn--stats">
          <icon trophy></icon>
        </button>
        <button class="btn btn--bl btn--prefs">
          <icon settings></icon>
        </button>
        <button class="btn btn--bl btn--back">
          <icon back></icon>
        </button>
        <button class="btn btn--br btn--pwa"></button>
      </div>
    </div>

    <script src="js/three.min.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>
